<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- header -->
    <div style="margin-top: 15px">
      <el-button type="primary" @click="addopen">添加分类</el-button>
    </div>

    <!-- 弹出框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="form.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="form.attr_vals" v-show="!this.editId">
          <el-cascader
            :options="tableData"
            :props="props"
            clearable
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addok">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 表格渲染 -->
    <el-table
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      row-key="cat_id"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <!-- <el-table-column type="index" width="50"> </el-table-column> -->
      <el-table-column property="cat_name" label="分类名称"> </el-table-column>
      <el-table-column property="cat_deleted" label="是否有效">
        <el-button type="success" icon="el-icon-check" circle></el-button>
      </el-table-column>
      <el-table-column property="cat_level" label="排序">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.cat_level | filLevel }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.cat_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getCategories,
  getgoods,
  delcategories,
  getCategoriesAdd,
  getCategoriesEdit,
} from "../utils/api";
export default {
  props: {},
  data() {
    return {
      options: [],
      editId: "",

      form: {
        cat_name: "",
      },

      title: "",
      props: { checkStrictly: true, label: "cat_name", value: "cat_id" },
      dialogVisible: false,
      tableData: [],
      id: "",
      sel: "",
      cat_pid:'',
      errid:'0'
    };
  },
  filters: {
    filLevel(val) {
      if (val == 0) {
        return "一级";
      } else if (val == 1) {
        return "二级";
      } else {
        return "三级";
      }
    },
  },
  computed: {},
  created() {
    this.render();
  },
  mounted() {},
  watch: {},
  methods: {
    render() {
      getCategories({ pagenum: 1, pagesize: 10 }).then((res) => {
        console.log(res);
        this.tableData = res.data.result;
      });
    },
    addopen() {
      this.dialogVisible = true;
      this.title = "添加";
    },
    // 添加编辑
    addok() {
      if (this.editId) {
        // 编辑
        getCategoriesEdit({
          id: this.editId,
          cat_name: this.form.cat_name,
        }).then((res) => {
          console.log(res);
          this.dialogVisible = false;
          this.render();
          this.editId = "";
          this.form = {};
        });
      } else {
        //   添加
        getCategoriesAdd({
          cat_name:this.form.cat_name,
          cat_pid:this.cat_pid,
          cat_level:this.errid}).then((res) => {
          console.log(res);
          this.dialogVisible = false;
          this.render();
        });
      }
    },
    // 搜索
    search() {},
    // 编辑
    handleEdit(row) {
      this.dialogVisible = true;
      this.title = "编辑";
      console.log(row);
      this.editId = row.cat_id;
      this.form.cat_name = row.cat_name;
    },
    // 删除
    handleDelete(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delcategories({ id }).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.render();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleChange(val) {
      // console.log(val);
     this.cat_pid=val[val.length-1]
     this.errid=val.length
     
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
</style>
